<template>
	<view>
		<cu-custom :bgColor="globalData.bgColor" :isBack="true">
			<template #content>
				<text class="text-darkgrey">{{ $t('home.shop-home.h24drv') }}</text>
			</template>
		</cu-custom>
		<view class="search flex bg-white fixed padding-top-sm solid-bottom">
			<view class="search-content round">
				<text class="cuIcon-search padding-right-xs margin-left"></text>
				<input type="text" :placeholder="$t('goodsspu.list.j68a7l')" v-model="inputKey" confirm-type="search" />
			</view>
			<view class="action">
				<button class="cu-btn bg-blue round search-button margin-right-sm" @click="search">{{ $t('bargain.bargainuser.655110') }}</button>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view>
				<view class="cu-list goods-list">
					<view class="cu-item bg-white solid-bottom" v-for="data in dataList" :key="data.id">
						<view class="flex justify-between padding-right">
							<view class="flex align-center padding-top padding-left-sm padding-bottom-sm">
								<text class="text-darkgrey text-df margin-right-xs cuIcon-titles"></text>
								<shop-info :shopId="data.shopId" :shopList="shopList"></shop-info>
							</view>
							<view class="text-xs cu-tag light round margin-top-sm" :class="data.shelf == 1 ? 'bg-cyan' : 'bg-red'">
								{{ data.shelf == 1 ? $t('coupon.counponinfo-detail.n703z9') : $t('coupon.counponinfo-detail.39j6cc') }}
							</view>
						</view>
						<view class="cu-list menu-avatar flex justify-between padding-left">
							<view class="cu-avatar img-box" :style="{ 'background-image': data.picUrls ? 'url(' + data.picUrls[0] + ')' : '' }"></view>
							<view class="content flex-sub padding-left padding-right text-sm">
								<view class="text-darkgrey text-df text-to-long">{{ data.name }}</view>
								<view class="text-purple-grey flex justify-between margin-top-xs">{{ $t('coupon.counponinfo-detail.63636w') }}{{ data.saleNum }}</view>
								<view class="margin-top-xs">
									<text class="text-red text-price text-xl text-bold">{{ data.priceDown }}</text>
									<text class="text-red text-xl text-bold" v-show="data.priceUp && data.priceDown != data.priceUp">
										{{ ' - ' }}
										<text class="text-red text-price text-xl text-bold">{{ data.priceUp }}</text>
									</text>
								</view>
								<!--   <view v-if="globalData.permissions['mall:goodsspu:edit']" class="flex justify-end padding-bottom padding-top-sm">
                                    <button @click="changeShelf(data)" class="cu-btn round button-bg shadow-blur"  :class="data.shelf==1?'bg-red':'bg-green'">{{data.shelf==1?'下架':'上架'}}</button>
                                </view> -->
								<view class="flex justify-end padding-bottom padding-top-sm">
									<button
										v-if="globalData.permissions['mall:goodsspu:edit']"
										@click="changeShelf(data)"
										class="cu-btn round button-bg shadow-blur"
										:class="data.shelf == 1 ? 'bg-red' : 'bg-green'"
									>
										{{ data.shelf == 1 ? $t('goodsspu.detail.n51s39') : $t('goodsspu.detail.u1ol8f') }}
									</button>
									<navigator :url="'detail?id=' + data.id" class="cu-btn round button-bg shadow-blur bg-blue margin-left">
										{{ $t('goodsspu.list.2c3gx3') }}
									</navigator>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
// 引入mescroll-mixins.js
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';

import ShopInfo from '@/components/shopinfo/shopinfo.vue';
import { getPage, getObj, addObj, putObj, delObj, putObjShelf } from '@/api/mall/goodsspu';
import { getList as getPageShopinfo } from '@/api/mall/shopinfo';

export default {
	mixins: [MescrollMixin], // 使用mixin
	components: {
		ShopInfo
	},
	onLoad() {
		this.getShopListData();
	},
	onShow() {
		if (this.mescroll) this.mescroll.resetUpScroll();
	},
	data() {
		return {
			globalData: getApp().globalData,
			CustomBar: this.CustomBar,
			inputKey: '',
			mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
			downOption: {
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
			},
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
				page: {
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: this.$t('bargain.bargaininfo.m3k7oc')
				}
			},
			// 列表数据
			dataList: [],
			shopList: []
		};
	},
	methods: {
		changeShelf(row) {
			let content = this.$t('goodsspu.detail.3fr6e7');
			let shelf = 1;
			if (row.shelf == 1) {
				shelf = 0;
				content = this.$t('goodsspu.detail.y771ra');
			}
			let that = this;
			uni.showModal({
				title: this.$t('bargain.bargaininfo.b8740a'),
				content: content,
				success: (res) => {
					if (res.confirm) {
						putObjShelf({
							ids: row.id,
							shelf: shelf
						}).then((data) => {
							uni.showToast({ title: this.$t('bargain.bargaininfo.f46253') });
							that.mescroll.resetUpScroll();
						});
					} else if (res.cancel) {
					}
				}
			});
		},
		getShopListData() {
			getPageShopinfo().then((response) => {
				if (response.data) {
					this.shopList = response.data;
				}
			});
		},

		search(val) {
			this.mescroll.resetUpScroll();
		},
		/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		/*下拉刷新的回调, 有三种处理方式:*/
		downCallback() {
			this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			this.mescroll.endSuccess();
		},
		/*上拉加载的回调*/
		upCallback(page) {
			let pageNum = page.num; // 页码, 默认从1开始
			let pageSize = page.size; // 页长, 默认每页10条
			let querySearch = '?current=' + pageNum + '&size=' + pageSize + '&descs=create_time';
			if (this.inputKey) {
				querySearch = querySearch + '&name=' + this.inputKey;
			}
			getPage(querySearch).then((response) => {
				if (response.data) {
					// 接口返回的当前页数据列表 (数组)
					let curPageData = response.data.records;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
					let totalSize = response.data.total;
					//设置列表数据
					if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
					this.dataList = this.dataList.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endBySize(curPageLen, totalSize);
					setTimeout(() => {
						this.mescroll.endSuccess(curPageLen);
					}, 20);
				}
			});
		}
	}
};
</script>

<style>
.search {
	width: 100%;
	padding-bottom: 20rpx;
	position: fixed;
	z-index: 1024;
}

.search-content {
	background-color: #f5f5f5;
	line-height: 64upx;
	height: 64upx;
	font-size: 24upx;
	color: #333333;
	flex: 1;
	display: flex;
	align-items: center;
	margin: 0 30upx;
}

.search-content input {
	flex: 1;
	padding-right: 30upx;
	height: 64upx;
	line-height: 64upx;
	font-size: 26upx;
	background-color: transparent;
}

.search-button {
	padding: 10rpx 30rpx 10rpx 30rpx;
}

.goods-list {
	margin-top: 100rpx;
}

.img-box {
	width: 200rpx !important;
	height: 200rpx !important;
}

.text-to-long {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.button-bg {
	width: 200rpx;
}
</style>
